import { Menu } from '@entity/common';
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export class GuideComponent extends Vue {

    /** 目录列表 */
    @Prop({
        default: () => []
    })
    private guideList: Array<Menu>;

    /** 顶部固定 */
    @Prop({
        default: 65
    })
    private top: number;

    /** 是否给选中栏目单独上色 */
    @Prop({
        default: true
    })
    private colorful: boolean;

    /** 已选择的目录下标 */
    private seletedIndex: number = 0;

    /**
     * 刷新的时候需要更新已选择的下标
     */
    created() {
        for (let index: number = 0; index < this.guideList.length; index++) {
            if (this.guideList[index].path == this.$route.path) {
                this.seletedIndex = index;
                break;
            }
        }
    }

    /**
     * 导航栏的 class 选项
     */
    private guideClasses(index: number): any {
        return {
            'guide-item': true, 
            'guide-item-active': this.colorful && this.seletedIndex == index
        }
    }

    /**
     * 点击目录的时候修改已选择的下标, 并跳转路由
     */
    private guideClicked(path: string, index: number): void {
        this.seletedIndex = index; 
        if (this.$route.path != path) {
            this.$router.replace(path);
        }
    }

}